<template>
    <div class="pay_list" >

    
        <div class="app" style="border: 2px solid;border-radius: 10px;background-color: rgb(232, 241, 237);width: 30%;margin-left: 35%;margin-right: 35%;font-size: 20px;">
            <h1 style="text-align: center;margin-bottom: 30px; margin-top: 20px;" >订单信息</h1>
            <div style="border-color: black;border-radius: 10px; border: 1px solid ;margin: 40px;">
            <ul>
            <li v-for="item in orders.orderdetailets" :key="item.id">
                <p style="margin-top: 40px;"><span style="font-weight: 600; margin: 16px;margin-bottom: ;">商品名称：</span>{{ item.product.name }} </p>
                <span style="font-weight: 600; margin: 16px;">数量：</span>× {{ item.quantity }}</p>
                <span style="font-weight: 600; margin: 16px;">价格：</span>{{ item.product.price * item.quantity }}元/500克</p>
            </li>
            </ul>
             <p>
                <span style="font-weight: 600; margin: 16px;">
                订单编号：
            </span>{{ orderId }} 
            </p>
            <p>
            <span style="font-weight: 600; margin: 16px;">    
                下单时间：
                </span>{{ orders.created }}
            </p>
            <p style="margin-bottom: 40px;">  <span style="font-weight: 600; margin: 16px; ">总价：</span>{{ orders.total }}元</p>
        </div>
          <el-button type="primary" @click="pay" style="margin-left: 39%;margin-bottom: 20%;margin-top: 20%;">支付</el-button>
        </div>
    </div>
</template>
<script>
import { getOrderApi } from '../api/GetOrder.js';
import { toPayApi } from '../api/ToPay.js';
import { toAliPay } from '../api/ToAliPay.js';
export default {
    name: "Pay",
    data() {
        return {
            orderId: "",
            orders: {
                order: "",
                orderdetailets: [],
            }
        }
    },
    methods: {
        getParams() {
            this.orderId = this.$route.query.orderId;
            // getReceiveApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
            //     this.receive = resp;
            // })

        },
        button() {
            console.log(this.orderId);
        },
        pay() {
            // toPayApi({ "ordersId": this.orderId }).then(resp => {
            //     alert("支付成功");
            //     this.$router.push({
            //         path: '/myorder'
            //     })
            // })
            toAliPay({
                "subject": "标题",
                "traceNo": this.orderId,
                "totalAmount": this.orders.total,
            }).then(resp => {
                console.log("1231232313212323123132123123")
                document.querySelector('body').innerHTML = resp;
                const div = document.createElement('div');
                div.innerHTML = resp.data;
                document.body.appendChild(div);

                // _blank -- 在新窗口中打开链接 
                // _parent -- 在父窗体中打开链接 
                // _self -- 在当前窗体打开链接,此为默认值 
                // _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
                document.forms[0].setAttribute('target', '_self');// 新建窗口页面
                document.forms[0].submit();



                this.$router.push({
                    // path: '/myorder'
                })
            })
        }
    },
    created() {
        this.getParams();
        getOrderApi({ "ordersId": this.orderId }).then(resp => {
            this.orders = resp;
        })
    },

}
</script>
<style scoped>
h1{
    color: red;
    font-size: 25px;
    font-weight: 400;
}


</style>